export default function(maxFrameCount) {
  // maxFrameCount 传递21表示要在21帧内把页面渲染出来，也就是要监控多少帧
  // 我这个组件最大是在哪去渲染帧区间完成所有的渲染
  // 正常情况浏览器是1秒60帧，具体机器配置也不一样，如果某一帧渲染东西太多，就会导致帧率降低
  // 浏览器有一个渲染帧，会一帧一帧渲染，渲染帧是在不断发生的
  // 思路就是第一帧渲染第一个组件，第二帧第二个。。。，或者隔几帧渲染一个组件，不过没必要，尽量密集点
  return {
    data() {
      return {
        frameCount: 0, // 当前渲染的帧数
      };
    },
    mounted() {
      const refreshFrameCount = () => {
        requestAnimationFrame(() => { // 下一帧渲染之前会运行这个回调函数
          this.frameCount++;
          if (this.frameCount < maxFrameCount) { // 直到21帧
            refreshFrameCount();
          }
        });
      };
      refreshFrameCount();
    },
    methods: {
      defer(showInFrameCount) { // 如果当前渲染帧大于传进来的数字，然后才返回true，渲染该组件
        return this.frameCount >= showInFrameCount;
      },
    },
  };
}
